<div class="navmenu">
    <input type="checkbox" title="Menu expand/collapse toggle" id="navmenu-toggle" class="navmenu-icon" />
    <label for="navmenu-toggle" class="navmenu-icon"><FluentIcon Value="@(new Icons.Regular.Size20.Navigation())" Color="Color.Neutral" /></label>
    <nav class="sitenav" aria-labelledby="main-menu" onclick="document.getElementById('navmenu-toggle').click()">
        <FluentNavMenu Id="main-menu" Title="Main menu">
            <FluentNavLink Icon="@(new Icons.Regular.Size20.Home())" Href="/" Match="NavLinkMatch.All">
                <h3>Home</h3>
            </FluentNavLink>

            <FluentNavGroup Expanded="true" Gap="10px" Icon="@(new Icons.Regular.Size20.PersonRunning())">
                <TitleTemplate><h3>Getting Started</h3></TitleTemplate>
                <ChildContent>
                    <FluentNavLink Href="/WhatsNew" Icon="@(new Icons.Regular.Size20.Info())">What's new</FluentNavLink>
                    <FluentNavLink Href="/UpgradeGuide" Icon="@(new Icons.Regular.Size20.ArrowUp())">Upgrade guide</FluentNavLink>
                    <FluentNavLink Href="/CodeSetup" Icon="@(new Icons.Regular.Size20.DocumentOnePageSparkle())">Code setup</FluentNavLink>
                    <FluentNavLink Href="/Templates" Icon="@(new Icons.Regular.Size20.Classification())">Project templates</FluentNavLink>
                    <FluentNavLink Href="/DesignTheme" Icon="@(new Icons.Regular.Size20.DarkTheme())">Themes</FluentNavLink>
                    <FluentNavLink Href="/DesignTokens" Icon="@(new Icons.Regular.Size20.DesignIdeas())">Design tokens</FluentNavLink>
                    <FluentNavLink Href="/Reboot" Icon="@(new Icons.Regular.Size20.ArrowReset())">Reboot</FluentNavLink>
                    <FluentNavLink Href="/IconsAndEmoji" Icon="@(new Icons.Regular.Size20.Symbols())">Icons and Emoji</FluentNavLink>
                    <FluentNavGroup Title="Services" Gap="10px" Icon="@(new Icons.Regular.Size20.SettingsCogMultiple())">
                        <FluentNavLink Href="/DialogService" Icon="@(new Icons.Regular.Size20.AppGeneric())">DialogService</FluentNavLink>
                        <FluentNavLink Href="/MessageService" Icon="@(new Icons.Regular.Size20.WindowHeaderHorizontal())">MessageService</FluentNavLink>
                        <FluentNavLink Href="/ToastService" Icon="@(new Icons.Regular.Size20.FoodToast())">ToastService</FluentNavLink>
                    </FluentNavGroup>
                </ChildContent>
            </FluentNavGroup>

            <FluentNavGroup Gap="10px" Icon="@(new Icons.Regular.Size20.ContentViewGallery())">
                <TitleTemplate><h3>Layout</h3></TitleTemplate>
                <ChildContent>
                    <FluentNavLink Href="/Header" Icon="@(new Icons.Regular.Size20.DocumentHeader())">Header</FluentNavLink>
                    <FluentNavLink Href="/Footer" Icon="@(new Icons.Regular.Size20.DocumentFooter())">Footer</FluentNavLink>
                    <FluentNavLink Href="/BodyContent" Icon="@(new Icons.Regular.Size20.ContentViewGallery())">BodyContent</FluentNavLink>
                    <FluentNavLink Href="/Grid" Icon="@(new Icons.Regular.Size20.Grid())">Grid</FluentNavLink>
                    <FluentNavLink Href="/Layout" Icon="@(new Icons.Regular.Size20.SlideLayout())">Layout</FluentNavLink>
                    <FluentNavLink Href="/MainLayout" Icon="@(new Icons.Regular.Size20.MatchAppLayout())">MainLayout</FluentNavLink>
                    <FluentNavLink Href="/Spacer" Icon="@(new Icons.Regular.Size20.Spacebar())">Spacer</FluentNavLink>
                    <FluentNavLink Href="/Splitter" Icon="@(new Icons.Regular.Size20.SplitVertical())">Splitter</FluentNavLink>
                    <FluentNavLink Href="/Stack" Icon="@(new Icons.Regular.Size20.Stack())">Stack</FluentNavLink>
                </ChildContent>
            </FluentNavGroup>

            <FluentNavGroup Gap="10px" Icon="@(new Icons.Regular.Size20.Form())">
                <TitleTemplate><h3>Form & Inputs</h3></TitleTemplate>
                <ChildContent>
                    <FluentNavLink Href="/Forms" Icon="@(new Icons.Regular.Size20.Form())">Overview</FluentNavLink>
                    <FluentNavLink Href="/Checkbox" Icon="@(new Icons.Regular.Size20.CheckboxChecked())">Checkbox</FluentNavLink>
                    <FluentNavLink Href="/InputFile" Icon="@(new Icons.Regular.Size20.ArrowUpload())">InputFile</FluentNavLink>
                    <FluentNavLink Href="/NumberField" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())">Number Field</FluentNavLink>
                    <FluentNavLink Href="/Radio" Icon="@(new Icons.Regular.Size20.RadioButton())">Radio</FluentNavLink>
                    <FluentNavLink Href="/RadioGroup" Icon="@(new Icons.Regular.Size20.RadioButton())">Radio Group</FluentNavLink>
                    <FluentNavLink Href="/Search" Icon="@(new Icons.Regular.Size20.SearchSquare())">Search</FluentNavLink>
                    <FluentNavLink Href="/Slider" Icon="@(new Icons.Regular.Size20.Options())">Slider</FluentNavLink>
                    <FluentNavLink Href="/Switch" Icon="@(new Icons.Regular.Size20.ToggleLeft())">Switch</FluentNavLink>
                    <FluentNavLink Href="/TextArea" Icon="@(new Icons.Regular.Size20.TextboxMore())">TextArea</FluentNavLink>
                    <FluentNavLink Href="/TextField" Icon="@(new Icons.Regular.Size20.Textbox())">Text Field</FluentNavLink>
                    <FluentNavLink Href="/DateTime#fluenttimepicker-class" Icon="@(new Icons.Regular.Size20.Clock())">Time picker</FluentNavLink>
                </ChildContent>
            </FluentNavGroup>

            <FluentNavGroup Gap="10px" Icon="@(new Icons.Regular.Size20.PuzzleCubePiece())">
                <TitleTemplate><h3>Components</h3></TitleTemplate>
                <ChildContent>
                    <FluentNavLink Href="/FluentComponentBase" Icon="@(new Icons.Regular.Size20.PuzzleCubePiece())">Overview</FluentNavLink>
                    <FluentNavLink Href="/Accordion" Icon="@(new Icons.Regular.Size20.TextCollapse())">Accordion</FluentNavLink>
                    <FluentNavLink Href="/Anchor" Icon="@(new Icons.Regular.Size20.Link())">Anchor</FluentNavLink>
                    <FluentNavLink Href="/AnchoredRegion" Icon="@(new Icons.Regular.Size20.LinkSquare())">Anchored Region</FluentNavLink>
                    <FluentNavGroup Expanded="true" Title="Badge" Gap="10px" Icon="@(new Icons.Regular.Size20.Tag())">
                        <FluentNavLink Href="/Badge" Icon="@(new Icons.Regular.Size20.Badge())">Badge</FluentNavLink>
                        <FluentNavLink Href="/CounterBadge" Icon="@(new Icons.Regular.Size20.NumberCircle1())">CounterBadge</FluentNavLink>
                        <FluentNavLink Href="/PresenceBadge" Icon="@(new Icons.Regular.Size20.PresenceAvailable())">PresenceBadge</FluentNavLink>
                    </FluentNavGroup>
                    <FluentNavLink Href="/Breadcrumb" Icon="@(new Icons.Regular.Size20.DocumentChevronDouble())">Breadcrumb</FluentNavLink>
                    <FluentNavLink Href="/Button" Icon="@(new Icons.Regular.Size20.ControlButton())">Button</FluentNavLink>
                    <FluentNavLink Href="/Card" Icon="@(new Icons.Regular.Size20.ContactCardGroup())">Card</FluentNavLink>
                    <FluentNavLink Href="/DataGrid" Icon="@(new Icons.Regular.Size20.Grid())">Data grid</FluentNavLink>
                    <FluentNavLink Href="/DateTime" Icon="@(new Icons.Regular.Size20.CalendarLtr())">Date & Time</FluentNavLink>
                    <FluentNavLink Href="/Dialog" Icon="@(new Icons.Regular.Size20.AppGeneric())">Dialog</FluentNavLink>
                    <FluentNavLink Href="/Divider" Icon="@(new Icons.Regular.Size20.DividerShort())">Divider</FluentNavLink>
                    <FluentNavLink Href="/Drag" Icon="@(new Icons.Regular.Size20.Drag())">Drag and Drop</FluentNavLink>
                    <FluentNavLink Href="/Emoji" Icon="@(new Icons.Regular.Size20.EmojiSmileSlight())">Emoji</FluentNavLink>
                    <FluentNavLink Href="/Flipper" Icon="@(new Icons.Regular.Size20.Navigation())">Flipper</FluentNavLink>
                    <FluentNavLink Href="/Highlighter" Icon="@(new Icons.Regular.Size20.Highlight())">Highlighter</FluentNavLink>
                    <FluentNavLink Href="/HorizontalScroll" Icon="@(new Icons.Regular.Size20.ArrowForward())">Horizontal Scroll</FluentNavLink>
                    <FluentNavLink Href="/Icon" Icon="@(new Icons.Regular.Size20.Symbols())">Icon</FluentNavLink>
                    <FluentNavLink Href="/Label" Icon="@(new Icons.Regular.Size20.DoorTag())">Label</FluentNavLink>
                    <FluentNavGroup Expanded="true" Title="List" Gap="10px" Icon="@(new Icons.Regular.Size20.List())">
                        <FluentNavLink Href="/Autocomplete" Icon="@(new Icons.Regular.Size20.ArrowAutofitContent())">Autocomplete</FluentNavLink>
                        <FluentNavLink Href="/Combobox" Icon="@(new Icons.Regular.Size20.BoxEdit())">Combobox</FluentNavLink>
                        <FluentNavLink Href="/Listbox" Icon="@(new Icons.Regular.Size20.List())">Listbox</FluentNavLink>
                        <FluentNavLink Href="/Select" Icon="@(new Icons.Regular.Size20.GroupList())">Select</FluentNavLink>
                        <FluentNavLink Href="/Option" Icon="@(new Icons.Regular.Size20.MultiselectRtl())">Option</FluentNavLink>
                    </FluentNavGroup>
                    <FluentNavLink Href="/Menu" Icon="@(new Icons.Regular.Size20.Navigation())">Menu</FluentNavLink>
                    <FluentNavLink Href="/MenuButton" Icon="@(new Icons.Regular.Size20.ChevronCircleDown())">MenuButton</FluentNavLink>
                    <FluentNavLink Href="/MessageBar" Icon="@(new Icons.Regular.Size20.WindowHeaderHorizontal())">MessageBar</FluentNavLink>
                    <FluentNavLink Href="/MessageBox" Icon="@(new Icons.Regular.Size20.MegaphoneLoud())">MessageBox</FluentNavLink>
                    <FluentNavLink Href="/NavMenu" Icon="@(new Icons.Regular.Size20.Navigation())">NavMenu</FluentNavLink>
                    <FluentNavLink Href="/NavMenuTree" Icon="@(new Icons.Regular.Size20.Navigation())">NavMenuTree</FluentNavLink>
                    <FluentNavLink Href="/Overflow" Icon="@(new Icons.Regular.Size20.MultiselectRtl())">Overflow</FluentNavLink>
                    <FluentNavLink Href="/Overlay" Icon="@(new Icons.Regular.Size20.CursorHover())">Overlay</FluentNavLink>
                    <FluentNavLink Href="/Panel" Icon="@(new Icons.Regular.Size20.PanelRight())">Panel</FluentNavLink>
                    <FluentNavLink Href="/Persona" Icon="@(new Icons.Regular.Size20.PersonAvailable())">Persona</FluentNavLink>
                    <FluentNavLink Href="/Popover" Icon="@(new Icons.Regular.Size20.TooltipQuote())">Popover</FluentNavLink>
                    <FluentNavLink Href="/Progress" Icon="@(new Icons.Regular.Size20.SquareHint())">Progress</FluentNavLink>
                    <FluentNavLink Href="/ProgressRing" Icon="@(new Icons.Regular.Size20.ArrowClockwiseDashes())">Progress Ring</FluentNavLink>
                    <FluentNavLink Href="/Skeleton" Icon="@(new Icons.Regular.Size20.Shortpick())">Skeleton</FluentNavLink>
                    <FluentNavLink Href="/SortableList" Icon="@(new Icons.Regular.Size20.ArrowSort())">Sortable List</FluentNavLink>
                    <FluentNavLink Href="/SplashScreen" Icon="@(new Icons.Regular.Size20.Drop())">SplashScreen</FluentNavLink>
                    <FluentNavLink Href="/Tabs" Icon="@(new Icons.Regular.Size20.TabDesktop())">Tabs</FluentNavLink>
                    <FluentNavLink Href="/Toast" Icon="@(new Icons.Regular.Size20.FoodToast())">Toast</FluentNavLink>
                    <FluentNavLink Href="/Toolbar" Icon="@(new Icons.Regular.Size20.WrenchScrewdriver())">Toolbar</FluentNavLink>
                    <FluentNavLink Href="/Tooltip" Icon="@(new Icons.Regular.Size20.TooltipQuote())">Tooltip</FluentNavLink>
                    <FluentNavLink Href="/TreeView" Icon="@(new Icons.Regular.Size20.TextBulletListTree())">Tree View</FluentNavLink>
                    <FluentNavLink Href="/Wizard" Icon="@(new Icons.Regular.Size20.ArrowStepInRight())">Wizard</FluentNavLink>
                </ChildContent>
            </FluentNavGroup>

            <FluentNavGroup Icon="@(new Icons.Regular.Size20.Beaker())" Gap="10px">
                <TitleTemplate><h3>Incubation lab</h3></TitleTemplate>
                <ChildContent>
                    <FluentNavLink Href="/Lab/Overview" Icon="@(new Icons.Regular.Size20.Beaker())">Overview</FluentNavLink>
                    <FluentNavLink Href="/Lab/MarkdownSection" Icon="@(new Icons.Regular.Size20.ArrowSortDown())">MarkdownSection</FluentNavLink>
                    <FluentNavLink Href="/Lab/TableOfContents" Icon="@(new Icons.Regular.Size20.DocumentTextLink())">TableOfContents</FluentNavLink>
                    <FluentNavLink Href="/MultiSplitter" Icon="@(new Icons.Regular.Size20.SplitHorizontal())">Multi Splitter</FluentNavLink>
                    <FluentNavLink Href="/KeyCode" Icon="@(new Icons.Regular.Size20.Keyboard())">KeyCode</FluentNavLink>
                </ChildContent>
            </FluentNavGroup>
        </FluentNavMenu>
    </nav>
</div>